import React, { Component } from 'react'
import axios from 'axios'
import {Route,NavLink,Switch,Redirect} from 'react-router-dom'
import Serach from './Serach'
import '../css/Category.scss'

export default class Category extends Component {
  constructor(props) {
    super(props)
    this.state = {
      // 全部数据
      classifyNameList: [],
      secondList: [],
      type:""
    }
    console.log()
  }

  // 初始化的时候选中第一个
  componentDidMount() {
    axios.get('http://shopapi.smartisan.com/mobile/classify').then((res) => {
      // console.log(res.data.data)
      this.setState({
        classifyNameList: res.data.data,
        secondList: res.data.data[0].second,
        type:0
      })
    })
  }


  // tab切换
  adressNavClick = (item,index) => {
    this.state.classifyNameList.forEach((__item) => {
      console.log(item)
      if (item.classifyId == __item.classifyId) {
        this.setState({
          secondList: item.second,
          type:index
        })
      }
    })
  }

  render() {
    return (
      <div>
        <div className="serach">
          <NavLink to="/serach">
          <input type="text" value="     请输入搜索关键字" />
          </NavLink>
          <Route path="/serach" component={Serach} />
        </div>
        <hr />
        <div className="category">
          <ul className ="left-warp">
            {this.state.classifyNameList ? this.state.classifyNameList.map((item,index) => {
              return (<li key={item.classifyId} onClick={() => {this.adressNavClick(item,index)}}>{item.classifyName}</li>)
            }) : ''}
          </ul>
          <div className="right-warp">
            {/* {
             this.state.classifyNameList[this.state.type].banner !==""? 
             <div> <img src={this.state.classifyNameList[this.state.type].banner[0].image} /> </div>:""
            } */}
            <ul>
              {this.state.secondList ? this.state.secondList.map((_item) => {
                return (<li key={_item.classifyId}><h3>{_item.classifyName}</h3>
                {
                  _item.third.map((_item_)=>{
                    return <div key={_item_.classifyId}>
                    <img src={_item_.image} />
                    <p>{_item_.classifyName}</p>
                    </div>
                  })
                }
                </li>)
              }) : ''}
            </ul>
          </div>
        </div>
      </div>
    )
  }
}
